<template>
	<view class="service-home-page">
		<u-navbar   :is-back="true" title="服务" :title-bold="true" :title-size="34" 
					:background="{background: '#f1f1f1'}"
					title-color="#404133" :border-bottom="false"  z-index="1001">
			<view slot="right" class="u-m-r-20" @click="modelShow=true">
				<u-icon name="more-dot-fill" size="48"></u-icon>
			</view>		
		</u-navbar>

		<view class="u-p-20">
			<view class="u-flex u-row-around u-col-center"
				style="background-color:rgb(87,171,109);border-radius: 16rpx;height: 280rpx;
						font-size: 32rpx;color: #f8f8f8;text-align: center;">
				<view>
					<view>
						<u-icon name="/static/image/wx/services/shoufukuan.png"
							color="#ffffff" size="90"></u-icon>
					</view>
					<view style="font-weight: bold;">收付款</view>
				</view>
				<view @click="toWallet()">
					<view class="u-m-b-6">
						<u-icon name="/static/image/wx/services/qianbao.png"
						color="#ffffff" size="70"></u-icon>
					</view>
					<view  style="font-weight: bold;">钱包</view>
					<view style="color: #dbdbdb;;font-size: 28rpx;">
						<text v-if="userAccount.accountBalance"> ¥ {{amountFormat()}}</text>
						<text v-else>¥ 0.00</text>
					</view>
				</view>
			</view>

			<view style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
				<view class="u-m-b-30" style="color:#606266">金融理财</view>
				<u-row style="color: #000000;font-size: 28rpx;padding: 30rpx 0rpx;">
					<u-col :span="3"  v-for="(service,index) in financeServiceList" :key="index">
						<view style="text-align: center;margin-bottom: 10rpx;">
							<u-icon :name="service.iconPath" :size="64"></u-icon>
						</view>
						<view style="text-align: center;">
							{{service.title}}
						</view>
					</u-col>
				</u-row>
			</view>

			<view style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
				<view class="u-m-b-30" style="color:#606266">生活服务</view>
				<u-row style="color: #000000;font-size: 28rpx;">
					<u-col style="margin: 30rpx 0rpx;" :span="3"  v-for="(service,index) in lifeServiceList" :key="index">
						<view style="text-align: center;margin-bottom: 10rpx;">
							<u-icon :name="service.iconPath" :size="64"></u-icon>
						</view>
						<view style="text-align: center;">
							<view>{{service.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<view style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
				<view class="u-m-b-30" style="color:#606266">交通出行</view>
				<u-row style="color: #000000;font-size: 28rpx;">
					<u-col style="margin: 30rpx 0rpx;" :span="3"  v-for="(service,index) in jiaotongServiceList" :key="index">
						<view style="text-align: center;margin-bottom: 10rpx;">
							<u-icon :name="service.iconPath" :size="64"></u-icon>
						</view>
						<view style="text-align: center;">
							<view>{{service.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<view style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
				<view class="u-m-b-30" style="color:#606266">购物消费</view>
				<u-row style="color: #000000;font-size: 28rpx;">
					<u-col style="margin: 30rpx 0rpx;" :span="3"  v-for="(service,index) in shopList" :key="index">
						<view style="text-align: center;margin-bottom: 10rpx;">
							<u-icon :name="service.iconPath" :size="64"></u-icon>
						</view>
						<view style="text-align: center;">
							<view>{{service.title}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<u-action-sheet :list="actionList" v-model="modelShow" @click="toServiceSet" border-radius="20"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				financeServiceList:[
					{iconPath:'/static/image/wx/services/xinyongka.png',title:'信用卡还款'},
					{iconPath:'/static/image/wx/services/weilidai.png',title:'微粒贷借钱'},
					{iconPath:'/static/image/wx/services/licai.png',title:'理财通'},
					{iconPath:'/static/image/wx/services/baoxianfuwu.png',title:'保险服务'},	
				],
				lifeServiceList:[
					{iconPath:'/static/image/wx/services/shoujichongzhi.png',title:'手机充值'},
					{iconPath:'/static/image/wx/services/shenghuojiaofei.png',title:'生活缴费'},
					{iconPath:'/static/image/wx/services/qq.png',title:'Q币充值'},
					{iconPath:'/static/image/wx/services/city.png',title:'城市服务'},
					{iconPath:'/static/image/wx/services/gongyi.png',title:'腾讯公益'},
					{iconPath:'/static/image/wx/services/yiliaojiankang.png',title:'医疗健康'},
				],
				jiaotongServiceList:[
					{iconPath:'/static/image/wx/services/chuxing.png',title:'出行服务'},
					{iconPath:'/static/image/wx/services/huoche.png',title:'火车票机票'},
					{iconPath:'/static/image/wx/services/didi.png',title:'滴滴出行'},
					{iconPath:'/static/image/wx/services/jiudian.png',title:'酒店'},
				],
				shopList:[
					{iconPath:'/static/image/wx/services/pinpai.png',title:'品牌发现'},
					{iconPath:'/static/image/wx/services/jingdong.png',title:'京东购物'},
					{iconPath:'/static/image/wx/services/waimai.png',title:'美团外卖'},
					{iconPath:'/static/image/wx/services/dianying.png',title:'电影演出'},
					{iconPath:'/static/image/wx/services/meituantejia.png',title:'美团特价'},
					{iconPath:'/static/image/wx/services/pinduoduo.png',title:'拼多多'},
					{iconPath:'/static/image/wx/services/weipinhui.png',title:'唯品会特卖'},
					{iconPath:'/static/image/wx/services/zhuanzhuan.png',title:'转转二手'},
					{iconPath:'/static/image/wx/services/beike.png',title:'贝壳找房'},
				],
				modelShow:false,
				actionList:[
					{text:'服务管理',fontSize:30,color:'#000000',subText:''},
				],
				userAccount: {}
			};
		},
		onShow:function(){
			this.getAccountInfo();
		},
		methods:{
			getAccountInfo:function(){
				let that=this;
				that.$u.api.imUser.getUserAccountInfo({}).then(res =>{
					if(res.code==200){
						console.log("====userAccount===",res);
						that.userAccount=res.data;
						this.$u.vuex("vuex_userAccountInfo",that.userAccount);
					}
				})
			},

			amountFormat:function(){
				let that=this;
				if(that.userAccount!=null&&that.userAccount!={}&&that.userAccount.accountBalance!=null&&that.userAccount!=undefined){
					let value=this.userAccount.accountBalance?this.userAccount.accountBalance.toString():'0.00';
					var arrayNum = value.split(".");
					if (arrayNum.length == 1) {
						return value.toString()+".00";
					}
					else{
						if (arrayNum.length>1) {
							//小数点右侧 如果小于两位则补一个0
							if (arrayNum[1].length<2) {
								return value.toString()+"0" ;
							}
							return value;
						}
					}
				}
				return "0.00";
			},

			toWallet:function(){
				this.$u.route("/pages/my/service/wallat");
			},
			toServiceSet:function(index){
				console.log(`点击了第${index + 1}项，内容为：${this.actionList[index].text}`)
			},
		}
	}
</script>

<style lang="scss" scoped>
.service-home-page{

}
</style>
<style>
	page{
		background-color: #f1f1f1;
	}
</style>
